<template>
  <van-tabbar
    v-model="active"
    :inactive-color="inactiveColor"
    :active-color="activeColor"
    route
    fixed
  >
    <van-tabbar-item v-for="(item,index) in tabbarArr" :to="item.url"  :key="index">
      <template #icon="props">
        <img :src="props.active ? item.icon.active : item.icon.inactive" />
      </template>
      <span>{{item.name}}</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabbarArr: [
        {
          name: "首页",
          url: "/",
          icon: {
            active: require("@/assets/tabbar/ic_menu_choice_pressed.png"),
            inactive: require("@/assets/tabbar/ic_menu_choice_nor.png")
          }
        },
        {
          name: "专题",
          url: "/topic",
          icon: {
            active: require("@/assets/tabbar/ic_menu_topic_pressed.png"),
            inactive: require("@/assets/tabbar/ic_menu_topic_nor.png")
          }
        },
        {
          name: "分类",
          url: "/catalog",
          icon: {
            active: require("@/assets/tabbar/ic_menu_sort_pressed.png"),
            inactive: require("@/assets/tabbar/ic_menu_sort_nor.png")
          }
        },
        {
          iconUrl: require("@/assets/tabbar/ic_menu_shoping_nor.png"),
          iconActiveUrl: require("@/assets/tabbar/ic_menu_shoping_pressed.png"),
          name: "购物车",
          url: "/shopcar",
          icon: {
            active: require("@/assets/tabbar/ic_menu_shoping_pressed.png"),
            inactive: require("@/assets/tabbar/ic_menu_shoping_nor.png")
          }
        },
        {
          name: "我的",
          url: "/user",
          icon: {
            active: require("@/assets/tabbar/ic_menu_me_pressed.png"),
            inactive: require("@/assets/tabbar/ic_menu_me_nor.png")
          }
        }
      ],
      activeColor: "#b4282d", // 选中标签的颜色
      inactiveColor: "#666666" // 未选中的颜色
    };
  }
};
</script>

<style>
</style>